<template>
  <div class="map-page">
    <div class="pageContemt">
      <div class="mapDetail" id="mapDetail" style="height:100%;width:80%">
        <div class="map" ref="map" id="map"></div>
      </div>
      <div class="mapcolor" style="width:20%">
        <div class="item" style="margin-top:10px">
          <div class="one"></div>
          <div>供应商</div>
        </div>
        <div class="item">
          <div class="two"></div>
          <div>投入品供应商</div>
        </div>
        <div class="item">
          <div class="three"></div>
          <div>原辅料供应商</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import { cityMap, provinceMap, special } from "../../../../static/maps/map-data";
export default {
  data: () => ({
    dataList: [],
    myChart: {},
    mapdata: [],
    mapName: "china",
    cityList: {},
    regions:[],
    colorArr: [
        {
          r: 255,
          g: 228,
          b: 195,
        },{
          r: 237,
          g: 228,
          b: 214,
        },{
          r: 255,
          g: 210,
          b: 227,
        },{
          r: 221,
          g: 219,
          b: 236,
        },{
          r: 255,
          g: 252,
          b: 220,
        },
    ], // 5
    allCompany: [],
    province: '',
    city: '',
  }),
  computed: {
    opt() {
      return {
        // backgroundColor: '#404a59',
        title: {
          top:20,
          text: "供应商分布",
          subtext: "",
          x: 'center',
          textStyle: {
            color: "#78B8FB",
          },
        },
        tooltip: {
          trigger: "item",
          formatter(params){
            return params.name;
          }
        },
        // geo: {
        //   type: "map",
        //   map: this.mapName,
        //   zoom: 1,
        //   scaleLimit:{min:0,max:3}, // 缩放级别
        //   label: {
        //     normal: {
        //       show: true,
        //       textStyle: {
        //         color: '#F4E925',
        //         shadowBlur: 10,
        //         shadowColor: '#05C3F9'
        //       },
        //     },
        //     emphasis: {
        //       show: true,
        //       textStyle: {
        //         color: "#fff",
        //         fontSize: 13,
        //       },
        //     },
        //   },
        //   itemStyle: {
        //     normal: {
        //       areaColor: 'transparent',
        //       borderColor: '#3fdaff',
        //       borderWidth: 2,
        //       shadowColor: 'rgba(63, 218, 255, 0.5)',
        //       shadowBlur: 30
        //     },
        //   },
        //   regions: this.regions,
        //   data: this.mapdata,
        // },
        textStyle: {
          fontFamily: 'KaiTi',
          fontSize: 14,
          fontWeight: 600
        },
        series: [{
          type: 'map',
          mapType: this.mapName,
          // aspectScale: 0.75,
          zoom: 1.2, //当前视角的缩放比例
          roam: false, //是否开启平游或缩放
          scaleLimit: { //滚轮缩放的极限控制
            min: 0.75,
            max: 3
          },
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#dd463b',
                shadowBlur: 6,
                shadowColor: 'rgb(181, 169, 205)',
              },
            },
            emphasis: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 16,
              },
            },
          },
          itemStyle: {
            normal: {
              // areaColor: 'transparent',
              // borderColor: '#3fdaff',
              borderColor: '#aaa',
              borderWidth: 1,
              shadowColor: 'rgba(255,255,255,0.2)',
              shadowBlur: 4,
              shadowOffsetY: -5,
            },
          },
          data: this.regions,
        }],
      };
    },
  },
  mounted() {
      this.init();
  },
  methods: {
    init() {
      // 初始化 echarts
      this.myChart = echarts.init(this.$refs.map);
      let chinaMap = require("../../../../public/static/maps/china.json");
      console.log(chinaMap);
      chinaMap.features.forEach((v) => {
        let color = ''
        switch(v.properties.name) {
          case '广东':
            color = '#ff9900'
            break;
          default: let Num = Math.floor(Math.random() * 5)
          color = `rgba(${this.colorArr[Num].r},${this.colorArr[Num].g},${this.colorArr[Num].b},1)`;
          break;
        }
        let itemStyle = {
          normal: {
            areaColor: color,
            shadowBlur: 0
          }
        };
        this.mapdata.push({ name: v.properties.name,color });
        this.regions.push({ name: v.properties.name ,itemStyle });
      });
      echarts.registerMap("china", chinaMap);
      this.myChart.setOption(this.opt,true);
      this.myChart.on("click", this.clickHandler);
      window.addEventListener("resize",() => {
        this.myChart.resize()
      })
    },
    clickHandler(params) {
      let name = params.name;
      this.mapdata = [];
      this.regions = [];

      if (name in provinceMap) {
        // 如果点击的是34个省、市、自治区，绘制选中地区的二级地图
        let _provinceMap = provinceMap;
        let province = require(`../../../../static/maps/province/${_provinceMap[name]}`);

        province.features.forEach((v) => {
          let color = ''
          switch(v.properties.name) {
            case '佛山市':
              color = '#ffff00'
              break;
            case '梅州市':
              color = '#00ff00'
              break;
            default:let Num = Math.floor(Math.random() * 5)
            color = `rgba(${this.colorArr[Num].r},${this.colorArr[Num].g},${this.colorArr[Num].b},1)`;
          }
          let itemStyle = {
            normal: {
              areaColor: color,
              shadowBlur: 0
            }
          };
          this.mapdata.push({ name: v.properties.name,color });
          this.regions.push({ name: v.properties.name ,itemStyle });
        });
        echarts.registerMap(name, province);
        this.mapName = name;
        this.province = name.indexOf('省') > 0 ? name : name + '省';
        this.city = '';
        this.loadList();
        this.updateChart();
      } else if (name in cityMap) {
        let _cityMap = cityMap;
        this.mapName = name;
        // 如果是【直辖市/特别行政区】只有二级下钻
        if (special.indexOf(name) >= 0) {
          this.mapName = name;
          this.city = name;
          this.loadList();
          this.updateChart();
        } else {
          this.city = name;
          this.loadList();
          // 显示县级地图
          // let city = require(`./maps/city/${_cityMap[name]}.json`);
          // city.features.forEach((v) => {
          //   let color = `rgba(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},0.5)`;
          //   let itemStyle = {
          //     normal: {
          //       areaColor: color
          //     }
          //   };
          //   this.mapdata.push({ name: v.properties.name });
          //   this.regions.push({ name: v.properties.name ,itemStyle});
          // });
          // echarts.registerMap(name, city);
          // this.mapName = name;
          // this.updateChart();

          // this.mapName = "china";
          // let chinaMap = require("./maps/china.json");
          // chinaMap.features.forEach((v) => {
          //   let Num = Math.floor(Math.random() * 5)
          //   let color = `rgba(${this.colorArr[Num].r},${this.colorArr[Num].g},${this.colorArr[Num].b},1)`;
          //   let itemStyle = {
          //     normal: {
          //       areaColor: color,
          //       shadowBlur: 0
          //     }
          //   };
          //   this.mapdata.push({ name: v.properties.name,color });
          //   this.regions.push({ name: v.properties.name ,itemStyle });
          // });
          // echarts.registerMap("china", chinaMap);
          // this.updateChart();
        }
      } else {
        // this.mapName = "china";
        // let chinaMap = require("./maps/china.json");
        // chinaMap.features.forEach((v) => {
        //   let Num = Math.floor(Math.random() * 5)
        //   let color = `rgba(${this.colorArr[Num].r},${this.colorArr[Num].g},${this.colorArr[Num].b},1)`;
        //   let itemStyle = {
        //     normal: {
        //       areaColor: color,
        //       shadowBlur: 0
        //     }
        //   };
        //   this.mapdata.push({ name: v.properties.name,color });
        //   this.regions.push({ name: v.properties.name ,itemStyle });
        // });
        // echarts.registerMap("china", chinaMap);
        // this.updateChart();
      }
    },
    async updateChart() {
      this.myChart.setOption(this.opt,true);
    },
    forwardChina(){
      this.mapName = "china";
      this.mapdata = [];
      this.regions = [];
      this.province = '';
      this.city = '';
      let chinaMap = require("../../../../public/static/maps/china.json");
      chinaMap.features.forEach((v) => {
        let Num = Math.floor(Math.random() * 5)
        let color = `rgba(${this.colorArr[Num].r},${this.colorArr[Num].g},${this.colorArr[Num].b},1)`;
        let itemStyle = {
          normal: {
            areaColor: color,
            shadowBlur: 0
          }
        };
        this.mapdata.push({ name: v.properties.name,color });
        this.regions.push({ name: v.properties.name ,itemStyle });
      });
      echarts.registerMap("china", chinaMap);
      this.loadList();
      this.updateChart();
    },
    loadList(){
      // this.getCompanyByArea({
      //   province : this.province,
      //   city : this.city,
      //   success: res => {
      //     this.allCompany = res.data;
      //     this.total = this.allCompany.length;
      //     this.tableDatas = this.allCompany.slice(0, 10);
      //   },
      //   failure: data => {
      //     this.$Modal.error({
      //       title: data.msg,
      //       okText: '知道了',
      //     });
      //   },
      // })
    },
  },
};
</script>

<style lang="scss" scoped>
.map-page{
   width: 100%;
   height: 100%;
   .pageContemt{
     width: 100%;
     text-align: center;
     height: 100%;
     display: flex;
     display: -webkit-flex;
     flex-direction: row;
     .mapcolor {
       width: 20%;
       height: 100%;
      //  display: flex;
      //  display: -webkit-flex;
      //  flex-direction: row;
      .item {
        width: 100%;
        height: 30px;
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
        padding: 8px;
        color: white;
        font-size: 14px;
      }
      .one {
        border-radius: 5px;
         width: 30px;
         height: 20px;
         margin-right: 5px;
         background-color: #ff9900;
       }
       .two {
         border-radius: 5px;
         width: 30px;
         height: 20px;
         margin-right: 5px;
         background-color: #ffff00;
       }
       .three {
         border-radius: 5px;
         width: 30px;
         height: 20px;
         margin-right: 5px;
         background-color: #00ff00;
       }
     }
     .mapDetail{
       display: inline-block;
       vertical-align: top;
       width: 100%;
       height: 100%;
       border: 1px solid #216bba;
       position: relative;
       .befor{
         &::before{
           content: '';
           position: absolute;
           width: 30px;
           height: 30px;
           border-top: 2px solid #216bba;
           border-left: 2px solid #216bba;
           left: 0px;
           top: 0px;
         }
         &::after{
           content: '';
           position: absolute;
           width: 30px;
           height: 30px;
           border-top: 2px solid #216bba;
           border-right: 2px solid #216bba;
           right: 0px;
           top: 0px;
         }
       }
       .after{
         &::before{
           content: '';
           position: absolute;
           width: 30px;
           height: 30px;
           border-bottom: 2px solid #216bba;
           border-left: 2px solid #216bba;
           left: 0px;
           bottom: 0px;
         }
         &::after{
           content: '';
           position: absolute;
           width: 30px;
           height: 30px;
           border-bottom: 2px solid #216bba;
           border-right: 2px solid #216bba;
           right: 0px;
           bottom: 0px;
         }
       }
       .forwardChinaClass{
         cursor: pointer;
         z-index: 998;
         position: absolute;
         left: 30px;
         top: 30px;
         .ivu-icon-ios-contract {
           font-size: 36px;
           font-weight: 500;
           color: #fff;
         }
       }
       .map{
         width: 100%;
         height: 100%;
       }
     }
     .companyDetail{
       display: inline-block;
       vertical-align: top;
       margin: 0 30px;
       min-width: 300px;
       height: 700px;
       border: 1px solid #216bba;
       position: relative;
       .befor{
         &::before{
           content: '';
           position: absolute;
           width: 30px;
           height: 30px;
           border-top: 2px solid #216bba;
           border-left: 2px solid #216bba;
           left: 0px;
           top: 0px;
         }
         &::after{
           content: '';
           position: absolute;
           width: 30px;
           height: 30px;
           border-top: 2px solid #216bba;
           border-right: 2px solid #216bba;
           right: 0px;
           top: 0px;
         }
       }
       .after{
         &::before{
           content: '';
           position: absolute;
           width: 30px;
           height: 30px;
           border-bottom: 2px solid #216bba;
           border-left: 2px solid #216bba;
           left: 0px;
           bottom: 0px;
         }
         &::after{
           content: '';
           position: absolute;
           width: 30px;
           height: 30px;
           border-bottom: 2px solid #216bba;
           border-right: 2px solid #216bba;
           right: 0px;
           bottom: 0px;
         }
       }
       .area{
         padding: 20px;
         border-bottom: 1px solid rgba(33,107,186,1);
         color: #78B8FB;
         text-align: center;
         font-size: 22px;
       }
       .company{
         margin-top: 20px;
         .companyName{
           margin: 20px;
           color: #F2F4F6;
           font-size: 14px;
         }
       }
       .noCompany{
         width: 100%;
         text-align: center;
         margin-top: 50px;
         color: #F2F4F6;
         font-size: 14px;
       }
       .processParaPage{
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
         text-align: center;
         /deep/li{
           background: rgba(255,255,255,0)!important;
           border: none!important;
         }
       }
     }
   }
 }
</style>
